<!--
 * 组件
 * @author luguoxiang
 * @date 2025-05-03
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <table-container>
    <lg-table v-model:expandedTreeNodes="expandedTreeNodes" :schema="schema" v-bind="tableProps">
      <!-- 工具栏 -->
      <template #toolbar-left>
        <lg-button-list :limit="$ToolBtnLimit">
          <btn-tool-add v-if="has('create')" @click="editRef.open({ parentId: 0 })" />
          <btn-tool-remove v-if="has('remove')" @click="remove()" />
          <btn-tool-export v-if="has('export')" @click="exports" />
          <btn-tool-import v-if="has('import')" @click="imports" />
          <t-button v-if="has('clear-cache')" theme="default" title="清空数据缓存" @click="clearCache">
            清空缓存
          </t-button>
          <t-button v-loading="loading" theme="default" title="扫描前端页面组件数据" @click="scan">扫描组件</t-button>
          <template #trigger><btn-tool-more /></template>
        </lg-button-list>
      </template>
      <!-- 操作栏 -->
      <template #actionbar="{ row }">
        <lg-button-list :limit="$RowBtnLimit">
          <btn-row-update v-if="has('update')" @click="editRef.open({ id: row.id })" />
          <btn-row-view v-if="has('detail')" @click="detailRef.open(row)" />
          <btn-row-remove v-if="has('remove')" @click="remove(row.id)" />
        </lg-button-list>
      </template>
      <!-- 插槽 -->
    </lg-table>
    <edit ref="editRef" @ok="reload()" />
    <detail ref="detailRef" />
  </table-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TableContainer } from '@/components';
import { LgButtonList, LgTable, useAuth, useTreeTable } from '@/soar';
import api from './api';
import schema from './schema';
import Edit from './Edit.vue';
import Detail from './Detail.vue';
import { components } from '@/pages/system/auth/component/utils';

const { has } = useAuth();
const editRef = ref();
const detailRef = ref();
const expandedTreeNodes = ref([]);

// 使用表格
const { exports, imports, remove, reload, tableProps, handleSingle, loading } = useTreeTable({
  api: {
    ...api,
    query(params: any) {
      params.$soarQuery.fields = [];
      params.$soarQuery['parentId-eq'] = 0;
      return api.query(params);
    },
  },
  props: {
    orderBys: ['id'],
    actionbar: {
      width: 120,
    },
  },
});

function clearCache() {
  api.clearCache();
}

function scan() {
  handleSingle('扫描前端页面组件配置生成组件数据', () => {
    return components().then(api.batchCreate);
  });
}
</script>
